import { Tabs } from "expo-router";
import React from "react";
import { Platform } from "react-native";
import { View, Colors } from "react-native-ui-lib";
import Ionicons from "@expo/vector-icons/Ionicons";
import { HapticTab } from "@/components/HapticTab";
import TabBarBackground from "@/components/ui/TabBarBackground";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors.primary,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: "absolute",
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "主页",
          tabBarIcon: ({ color, focused }) =>
            focused ? (
              <Ionicons size={24} name="home" color={color} />
            ) : (
              <Ionicons size={24} name="home-outline" color={color} />
            ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "发现",
          tabBarIcon: ({ color, focused }) =>
            focused ? (
              <Ionicons size={24} name="planet-sharp" color={color} />
            ) : (
              <Ionicons size={24} name="planet-outline" color={color} />
            ),
        }}
      />
    </Tabs>
  );
}
